<template>
  <LayoutView :select-index="3">
    <BookList :book-list="bookList" title="阅读记录" show-status show-remove @onRemove="remove"/>
    <div style="text-align: center;margin-top: 15px">
      <el-pagination hide-on-single-page background layout="prev,pager,next" :total="pageInfo.total" :current-page="pageInfo.page" :page-size="pageInfo.limit" @current-change="currentChange"/>
    </div>
  </LayoutView>
</template>

<script>
import LayoutView from '@/views/front/components/LayoutView.vue'
import BookList from '@/views/front/components/BookList.vue'
export default {
  name: 'RecordView',
  components: { LayoutView, BookList },
  data () {
    return {
      bookList: [],
      pageInfo: { page: 1, limit: 3, total: 0, userId: '' }
    }
  },
  methods: {
    getBookList () {
      this.$http.get('api/book/record', this.pageInfo).then(({ data }) => {
        this.bookList = [...data.records]
        this.pageInfo.page = data.current
        this.pageInfo.limit = data.size
        this.pageInfo.total = data.total
      })
    },
    currentChange (val) {
      this.pageInfo.page = val
      this.getBookList()
    },
    remove (bookId) {
      this.$confirm('确定删除该记录吗？').then(() => {
        this.$http.delete('api/book/record/delete', { bookId }).then(() => {
          this.$message.success('删除成功')
          this.getBookList()
        })
      })
    }
  },
  created () {
    this.pageInfo.userId = JSON.parse(sessionStorage.getItem('vipInfo'))?.loginInfo?.userId
    if (this.pageInfo.userId) {
      this.getBookList()
    } else {
      this.$message.error('请先登录！')
      this.$router.replace('/')
    }
  }
}
</script>

<style scoped>

</style>
